<template>
	<view>
		<!-- 地址 -->
		<navigator url="/pagesA/address/address" class="address-section">
			<view class="order-content">
				<text class="yticon icon-shouhuodizhi"></text>
				<view class="cen">
					<view class="top">
						<text class="name">{{addressData.name}}</text>
						<text class="mobile">{{addressData.mobile}}</text>
					</view>
					<text class="address">{{addressData.address}} {{addressData.area}}</text>
				</view>
				<text class="yticon icon-you"></text>
			</view>
			<image class="a-bg" src=""></image>
		</navigator>

		<view class="goods-section">
			<view class="g-header b-b">
				<image class="logo" src="/static/xinrenhuodong.png"></image>
				<text class="name">生物伞店铺</text>
			</view>
			<!-- 立即购买 -->
			<view v-show="goods_id != undefined">
				<view class="g-item">
					<image :src="data.goods_thumb"></image>
					<view class="right">
						<text class="title clamp">{{data.goods_desc}}</text>
						<text class="spec">{{data.format}}</text>
						<view class="price-box">
							<text class="price" v-if="sure == 1 || sure == 2">￥{{data.price}}</text>
							<text class="price" v-if="sure == 0">￥{{data.cost_price}}</text>
							<text class="number">x {{number}}</text>
						</view>
					</view>
				</view>
			</view>
			<!-- 购物车购买 -->
			<view v-show="goods_id == undefined">
				<view class="g-item" v-for="(item,index) in cartList" :key="index">
					<image :src="item.goodsInfo.goods_thumb_image"></image>
					<view class="right">
						<text class="title clamp">{{item.goodsInfo.goods_desc}}</text>
						<text class="spec">{{item.goodsInfo.format}}</text>
						<view class="price-box">
							<text class="price">￥{{item.goodsInfo.price}}</text>
							<text class="number">x {{item.number}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 优惠券-->
		<view class="yt-list">
			<view class="yt-list-cell b-b" @click="toggleMask('show')" v-if="sure == 0">
				<view class="cell-icon">
					券
				</view>
				<text class="cell-tit clamp">{{coupon}}</text>
				<text class="cell-tip active">
					选择优惠券
				</text>
				<text class="cell-more wanjia wanjia-gengduo-d"></text>
			</view>
			<view class="yt-list-cell b-b" v-if="sure == 0 || sure == 2" @click="toggleMask1('show')">
				<view class="cell-icon hb">
					票
				</view>
				<text class="cell-tit clamp">开票</text>
				<text class="cell-tip disabled">开票列表选择</text>
			</view>
		</view>
		<!-- 金额明细 -->
		<view class="yt-list">
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">商品金额</text>
				<text class="cell-tip">￥{{price_all}}</text>
			</view>
			<view v-if="sure == 0">
				<view class="yt-list-cell b-b">
					<text class="cell-tit clamp">优惠金额</text>
					<text class="cell-tip red">-￥{{discounted_price}}</text>
				</view>
			</view>
			<view class="yt-list-cell b-b">
				<text class="cell-tit clamp">运费</text>
				<text class="cell-tip">免运费</text>
			</view>
			<view class="yt-list-cell desc-cell">
				<text class="cell-tit clamp">备注</text>
				<input class="desc" type="text" v-model="remark" placeholder="请填写备注信息" placeholder-class="placeholder" />
			</view>
		</view>
		
		<view class="pay-type-list">
			<view class="type-item" @click="changePayType(1)">
				<text class="icon yticon icon-erjiye-yucunkuan"></text>
				<view class="con">
					<text class="tit">余额支付</text>
					<text>可用余额 ¥{{commision}}</text>
				</view>
				<label class="radio">
					<radio value="" color="#fa436a" :checked='payType == 1' />
					</radio>
				</label>
			</view>
			<view class="type-item b-b" @click="changePayType(3)">
				<text class="icon yticon icon-weixinzhifu"></text>
				<view class="con">
					<text class="tit">微信支付</text>
					<text>推荐使用微信支付</text>
				</view>
				<label class="radio">
					<radio value="" color="#fa436a" :checked='payType == 3' />
					</radio>
				</label>
			</view>
			<view class="type-item b-b" @click="changePayType(4)" v-if="sure == 0">
				<text class="icon yticon icon-erjiye-yucunkuan"></text>
				<view class="con">
					<text class="tit">首单余额支付</text>
					<text>可用首单余额 ¥{{levelPrice}}</text>
				</view>
				<label class="radio">
					<radio value="" color="#fa436a" :checked='payType == 4' />
					</radio>
				</label>
			</view>
		</view>
		
		<!-- 底部 -->
		<view class="footer">
			<view class="price-content">
				<text>实付款</text>
				<text class="price-tip">￥</text>
				<text class="price">{{price_all}}</text>
			</view>
			<text class="submit" @click="submit">立即购买</text>
		</view>
		
		<!-- 优惠券面板 -->
		<view class="mask" :class="maskState===0 ? 'none' : maskState===1 ? 'show' : ''" @click="toggleMask">
			<view class="mask-content">
				<!-- 优惠券页面，仿mt -->
				<view class="coupon-item" v-for="(item,index) in couponList" :key="index" @click="choose_coupon(item.id,item.price,item.coupon_name)">
					<view class="con">
						<view class="left">
							<text class="title">{{item.coupon_name}}</text>
						</view>
						<view class="circle l"></view>
						<view class="circle r"></view>
					</view>
					<text class="tips"><text class="time">有效期{{item.use_start_time}}至{{item.use_end_time}}</text></text>
				</view>
			</view>
		</view>
		<!-- 开票列表 -->
		<view class="mask" :class="maskState1===0 ? 'none' : maskState1===1 ? 'show' : ''" @click="toggleMask1">
			<view class="mask-content">
				<view class="coupon-item" v-for="(item,index) in taxList" :key="index" @click="choose_coupon1(item.id)">
					<view class="con" style="height: 200upx;">
						<view class="left" style="height: 200upx;">
							<text class="title" v-show="item.company_name">公司名:{{item.company_name}}</text>
							<text class="title" v-show="item.company_address">公司地址:{{item.company_address}}</text>
							<text class="title" v-show="item.company_phone">公司号码:{{item.company_phone}}</text>
						</view>
						<view class="circle l"></view>
						<view class="circle r"></view>
					</view>
					<view>
						<view>银行:{{item.bank}}</view>
						<view>银行账号:{{item.bankNumber}}</view>
					</view>
					<text class="tips"><text class="time">开票日期:{{item.create_time}}</text></text>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				user_id:'',
				goods_id:'', // 直接购买的单个商品id
				level_id: 1,
				data:{}, // 单个商品
				cartList:[], //多个商品,购物车
				maskState: 0, //优惠券面板显示状态
				maskState1: 0, //开票信息面板显示状态
				payType: 1, //1余额 2微信 3首单余额...
				goods_thumb: '', //商品图片,
				number: 1, //购买数量,
				price: 0, // 单件商品价格
				price_all: 0, // 总价格
				price_base:'', // 初始化总价格参数
				couponList: [], // 优惠券列表
				taxList: [], // 开票列表
				coupon:'优惠券',
				discounted_price: 0,
				addressData: {},
				remark:'', // 备注
				commision: '' ,// 可用余额
				levelPrice: '', // 首单余额
				coupon_id: 0, // 优惠券id
				tax_id: '', // 开票信息
				sure: 0,
				panicBuying_image:'',
				panic_buying_id: '' , // 限时活动商品id
			}
		},
		onLoad:function(e){
			this.goods_id = e.orderid
			this.number = e.number
			this.level_id = e.level_id
			if(e.sure == 1) {
				this.sure = e.sure
				uni.setNavigationBarTitle({
				    title: '拼团下单'
				});
			}
			if(e.sure == 2) {
				this.sure = e.sure
				uni.setNavigationBarTitle({
				    title: '限时下单'
				});
			}
			// if(e.sure == 0) {
			// 	this.level_id = e.level_id
			// }
			uni.getStorage({
				key: 'user_id',
				success: (res) => {
					this.user_id = res.data
					this.setAjax()
				},
				fail: () => {
					uni.navigateTo({
						url: '../../../index/index'
					});
				}
			});
		},
		methods: {
			setAjax() {
				let o = this
				// 商品列表
				if(this.goods_id) {
					// 立即购买(存在商品的id)
					if ( this.sure == 0) {
						// 普通商品
						uni.request({
						    url: 'https://cx.mingmeijt.com/Api/Goods/goodsDetail',
								method: 'POST',
								data:{
									goods_id: this.goods_id,
									user_id: this.user_id,
								},
						    success: (res) => {
									this.data = res.data.data
									console.log(this.data)
									this.data.goods_thumb_image = 'https://cx.mingmeijt.com' + this.data.goods_thumb_image
									this.data.goods_thumb = 'https://cx.mingmeijt.com' + this.data.goods_thumb
									this.data.goods_detail = 'https://cx.mingmeijt.com' + this.data.goods_detail
									for(var i=0; i<o.data.goods_images.length; i++) {
										o.data.goods_images[i] = 'https://cx.mingmeijt.com' + o.data.goods_images[i]
									}
									this.price = this.data.cost_price
									this.price_all = this.data.cost_price * this.number
									this.price_base = this.price_all
								}
						});
					}
					// 拼团商品
					if ( this.sure == 1 ) {
						uni.request({
							url: 'https://cx.mingmeijt.com/Api/Assemble/detail',
							method: 'POST',
							header:{ 'Content-Type':'application/x-www-form-urlencoded'},
							data:{
								id: this.goods_id,
							},
							success: res => {
								this.data = res.data.data
								this.data.goods_thumb = 'https://cx.mingmeijt.com' + this.data.goods_thumb
								this.price_all = this.data.cost_price
								console.log(this.data)
							},
							fail: () => {},
							complete: () => {}
						});
					}
					// 限时抢购
					if ( this.sure == 2 ) {
						uni.request({
						    url: 'https://cx.mingmeijt.com/Api/PanicBuyingGoods/goodsDetail',
								method: 'POST',
								data:{
									goods_id: this.goods_id,
								},
								header:{ 'Content-Type':'application/x-www-form-urlencoded'},
						    success: (res) => {
									console.log(res)
									this.data = res.data.data
									this.data.goods_thumb_image = 'https://cx.mingmeijt.com' + this.data.goods_thumb_image
									this.data.goods_thumb = 'https://cx.mingmeijt.com' + this.data.goods_thumb
									this.data.goods_detail = 'https://cx.mingmeijt.com' + this.data.goods_detail
									o.data.goods_images = JSON.parse(o.data.goods_images)
									for(var i=0; i<o.data.goods_images.length; i++) {
										o.data.goods_images[i] = 'https://cx.mingmeijt.com' + o.data.goods_images[i]
									}
									this.price = this.data.cost_price
									this.price_all = this.data.price * this.number
									this.price_base = this.price_all
									this.panic_buying_id = res.data.data.panic_buying_id
								}
						});
					}
				} else {
					// 购物车购买
					uni.request({
					    url: 'https://cx.mingmeijt.com/Api/GoodsCart/cartList',
							method: 'POST',
							data: {
								user_id: this.user_id,
								level_id: this.level_id
							},
							header:{'Content-Type':'application/x-www-form-urlencoded'},
					    success: (res) => {
								this.cartList = res.data.data.goods_cart
								if (!res.data.data.goods_cart) {
									o.cartList = []
									return
								}
								let day2 = new Date().getTime();
								let price_all = 0
								let goodsCartId = []
								console.log(this.cartList)
								for(let i=0; i<o.cartList.length; i++) {
									o.cartList[i].goodsInfo.goods_thumb_image = 'https://cx.mingmeijt.com' + o.cartList[i].goodsInfo.goods_thumb_image+"?time=" + day2
									o.cartList[i].number = parseInt(o.cartList[i].number)
									price_all = price_all + o.cartList[i].number * o.cartList[i].goodsInfo.cost_price
									goodsCartId.push(o.cartList[i].id)
								}
								this.goodsCartId = goodsCartId
								this.price_all = price_all
								this.price_base = this.price_all
							}
					});
				}
				
				// 获取开票信息
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/Tax/index',
					method: 'POST',
					data: {
						user_id: this.user_id,
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						this.taxList = res.data.data
					},
					fail: () => {},
					complete: () => {}
				});
				// 获取余额
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/User/myPurse',
					method: 'POST',
					data: {
						user_id: this.user_id,
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
						this.commision = res.data.data.commision
						this.levelPrice = res.data.data.levelPrice
					},
					fail: () => {},
					complete: () => {}
				});
				// 地址
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/Address/index?p=1',
					method: 'POST',
					data: {
						user_id: this.user_id,
					},
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					success: res => {
					this.addressData = res.data.data.list
					let arr = this.addressData.filter(function(item) {
						return (item.is_default == '1')
					})
						this.addressData = arr[0]
					},
					fail: () => {},
					complete: () => {}
				});
				// 代金券列表
				uni.request({
					url: 'https://cx.mingmeijt.com/Api/Coupon/myCouponList',
					method: 'POST',
					header:{'Content-Type':'application/x-www-form-urlencoded'},
					data:{
						user_id:this.user_id,
					},
					success: res => {
						this.couponList = res.data.data
					},
					fail: () => {},
					complete: () => {}
				});
			},
			choose_coupon(id,price,name) {
				this.coupon_id = id
				this.price_all = this.price_base
				this.discounted_price = price
				this.coupon = name
				this.price_all = this.price_all - this.discounted_price
			},
			choose_coupon1(id) {
				this.tax_id = id
			},
			//显示优惠券面板
			toggleMask(type){
				let timer = type === 'show' ? 10 : 300;
				let	state = type === 'show' ? 1 : 0;
				this.maskState = 2;
				setTimeout(()=>{
					this.maskState = state;
				}, timer)
			},
			// 显示开票信息列表
			toggleMask1(type){
				let timer = type === 'show' ? 10 : 300;
				let	state = type === 'show' ? 1 : 0;
				this.maskState1 = 2;
				setTimeout(()=>{
					this.maskState1 = state;
				}, timer)
			},
			numberChange(data) {
				this.number = data.number;
			},
			//选择支付方式
			changePayType(type){
				this.payType = type;
			},
			//确认支付
			submit: async function() {
				// 直接立即购买
				if(this.goods_id) {
					// 普通商品下单
					if (this.sure == 0) {
						// console.log(this.user_id)
						// console.log(this.level_id)
						// console.log(this.addressData.id)
						// console.log(this.coupon_id)
						// console.log(this.payType)
						// console.log(this.goods_id)
						// console.log(this.number)
						uni.request({
							url: 'https://cx.mingmeijt.com/Api/Order/createOrder',
							method: 'POST',
							header:{'Content-Type':'application/x-www-form-urlencoded'},
							data:{
								user_id: this.user_id,
								level_id: this.level_id,
								address_id: this.addressData.id,
								// goodsCartId: 6238
								is_my_warehouse: 1,
								coupon_id: this.coupon_id,
								tax_id: this.tax_id,
								remark: this.remark,
								pay_type: this.payType,
								goods_id: this.goods_id, // 直接购买的商品id
								number: this.number
							},
							success: res => {
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								});
								if(res.data.code == 200) {
									setTimeout(function() {
									uni.redirectTo({
										url: './order?index=1'
									})
									}, 1500);
								}
							},
							fail: () => {},
							complete: () => {}
						});
					}
					if (this.sure == 1) {
						// 拼团下单
						uni.request({
							url: 'https://cx.mingmeijt.com/Api/AssembleOrder/createOrder',
							method: 'POST',
							header:{'Content-Type':'application/x-www-form-urlencoded'},
							data:{
								user_id: this.user_id,
								address_id: this.addressData.id,
								remark: this.remark,
								tax_id: this.tax_id,
								pay_type: this.payType,
								is_single: this.data.is_single,
								assemble_id: this.goods_id, // 直接购买的商品id
							},
							success: res => {
								console.log(res)
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								});
								if(res.data.code == 200) {
									setTimeout(function() {
									uni.redirectTo({
										url: './order?index=1'
									})
									}, 1500);
								}
							},
							fail: () => {},
							complete: () => {}
						});
					}
					// 限时下单
					if (this.sure == 2) {
						uni.request({
							url: 'https://cx.mingmeijt.com/Api/PanicBuyingOrder/createOrder',
							method: 'POST',
							header:{'Content-Type':'application/x-www-form-urlencoded'},
							data:{
								user_id: this.user_id,
								address_id: this.addressData.id,
								remark: this.remark,
								tax_id: this.tax_id,
								pay_type: this.payType,
								goods_id: this.goods_id, // 直接购买的商品id
								panic_buying_id: this.panic_buying_id,
								number: this.number,
							},
							success: res => {
								uni.showToast({
									title: res.data.msg,
									icon: 'none'
								});
								if(res.data.code == 200) {
									setTimeout(function() {
									uni.redirectTo({
										url: './order?index=1'
									})
									}, 1500);
								}
							},
							fail: () => {},
							complete: () => {}
						});
					}
				} else {
					// 购物车 下单
					uni.request({
						url: 'https://cx.mingmeijt.com/Api/Order/createOrder',
						method: 'POST',
						header:{'Content-Type':'application/x-www-form-urlencoded'},
						data:{
							user_id: this.user_id,
							address_id: this.addressData.id,
							pay_type: this.payType,
							level_id: this.level_id,
							// goods_id: this.goods_id, // 直接购买的商品id
							goodsCartId: this.goodsCartId,
							is_my_warehouse: 1,
							coupon_id: this.coupon_id,
							remark: this.remark,
							tax_id: this.tax_id,
						},
						success: res => {
							// console.log(res)
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							});
							if(res.data.code == 200) {
								setTimeout(function() {
								uni.redirectTo({
									url: './order?index=1'
								})
								}, 1500);
							}
						},
						fail: () => {},
						complete: () => {}
					});
				}
				
				// uni.redirectTo({
				// 	url: '/pages/money/paySuccess'
				// })
			},
			stopPrevent(){}
		}
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
		padding-bottom: 100upx;
	}

	.address-section {
		padding: 30upx 0;
		background: #fff;
		position: relative;

		.order-content {
			display: flex;
			align-items: center;
		}

		.icon-shouhuodizhi {
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 90upx;
			color: #888;
			font-size: 44upx;
		}

		.cen {
			display: flex;
			flex-direction: column;
			flex: 1;
			font-size: 28upx;
			color: $font-color-dark;
		}

		.name {
			font-size: 34upx;
			margin-right: 24upx;
		}

		.address {
			margin-top: 16upx;
			margin-right: 20upx;
			color: $font-color-light;
		}

		.icon-you {
			font-size: 32upx;
			color: $font-color-light;
			margin-right: 30upx;
		}

		.a-bg {
			position: absolute;
			left: 0;
			bottom: 0;
			display: block;
			width: 100%;
			height: 5upx;
		}
	}

	.goods-section {
		margin-top: 16upx;
		background: #fff;
		padding-bottom: 1px;

		.g-header {
			display: flex;
			align-items: center;
			height: 84upx;
			padding: 0 30upx;
			position: relative;
		}

		.logo {
			display: block;
			width: 50upx;
			height: 50upx;
			border-radius: 100px;
		}

		.name {
			font-size: 30upx;
			color: $font-color-base;
			margin-left: 24upx;
		}

		.g-item {
			display: flex;
			margin: 20upx 30upx;

			image {
				flex-shrink: 0;
				display: block;
				width: 140upx;
				height: 140upx;
				border-radius: 4upx;
			}

			.right {
				flex: 1;
				padding-left: 24upx;
				overflow: hidden;
			}

			.title {
				font-size: 30upx;
				color: $font-color-dark;
			}

			.spec {
				font-size: 26upx;
				color: $font-color-light;
			}

			.price-box {
				display: flex;
				align-items: center;
				font-size: 32upx;
				color: $font-color-dark;
				padding-top: 10upx;

				.price {
					margin-bottom: 4upx;
				}
				.number{
					font-size: 26upx;
					color: $font-color-base;
					margin-left: 20upx;
				}
			}

			.step-box {
				position: relative;
			}
		}
	}
	.yt-list {
		margin-top: 16upx;
		background: #fff;
	}

	.yt-list-cell {
		display: flex;
		align-items: center;
		padding: 10upx 30upx 10upx 40upx;
		line-height: 70upx;
		position: relative;

		&.cell-hover {
			background: #fafafa;
		}

		&.b-b:after {
			left: 30upx;
		}

		.cell-icon {
			height: 32upx;
			width: 32upx;
			font-size: 22upx;
			color: #fff;
			text-align: center;
			line-height: 32upx;
			background: #f85e52;
			border-radius: 4upx;
			margin-right: 12upx;

			&.hb {
				background: #ffaa0e;
			}

			&.lpk {
				background: #3ab54a;
			}

		}

		.cell-more {
			align-self: center;
			font-size: 24upx;
			color: $font-color-light;
			margin-left: 8upx;
			margin-right: -10upx;
		}

		.cell-tit {
			flex: 1;
			font-size: 26upx;
			color: $font-color-light;
			margin-right: 10upx;
		}

		.cell-tip {
			font-size: 26upx;
			color: $font-color-dark;

			&.disabled {
				color: $font-color-light;
			}

			&.active {
				color: $base-color;
			}
			&.red{
				color: $base-color;
			}
		}

		&.desc-cell {
			.cell-tit {
				max-width: 90upx;
			}
		}

		.desc {
			flex: 1;
			font-size: $font-base;
			color: $font-color-dark;
		}
	}
	
	/* 支付列表 */
	.pay-list{
		padding-left: 40upx;
		margin-top: 16upx;
		background: #fff;
		.pay-item{
			display: flex;
			align-items: center;
			padding-right: 20upx;
			line-height: 1;
			height: 110upx;	
			position: relative;
		}
		.icon-weixinzhifu{
			width: 80upx;
			font-size: 40upx;
			color: #6BCC03;
		}
		.icon-alipay{
			width: 80upx;
			font-size: 40upx;
			color: #06B4FD;
		}
		.icon-xuanzhong2{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 60upx;
			height: 60upx;
			font-size: 40upx;
			color: $base-color;
		}
		.tit{
			font-size: 32upx;
			color: $font-color-dark;
			flex: 1;
		}
	}
	
	.footer{
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 995;
		display: flex;
		align-items: center;
		width: 100%;
		height: 90upx;
		justify-content: space-between;
		font-size: 30upx;
		background-color: #fff;
		z-index: 998;
		color: $font-color-base;
		box-shadow: 0 -1px 5px rgba(0,0,0,.1);
		.price-content{
			padding-left: 30upx;
		}
		.price-tip{
			color: $base-color;
			margin-left: 8upx;
		}
		.price{
			font-size: 36upx;
			color: $base-color;
		}
		.submit{
			display:flex;
			align-items:center;
			justify-content: center;
			width: 280upx;
			height: 100%;
			color: #fff;
			font-size: 32upx;
			background-color: $base-color;
		}
	}
	
	/* 优惠券面板 */
	.mask{
		display: flex;
		align-items: flex-end;
		position: fixed;
		left: 0;
		top: var(--window-top);
		bottom: 0;
		width: 100%;
		background: rgba(0,0,0,0);
		z-index: 9995;
		transition: .3s;
		
		.mask-content{
			width: 100%;
			min-height: 30vh;
			max-height: 70vh;
			background: #f3f3f3;
			transform: translateY(100%);
			transition: .3s;
			overflow-y:scroll;
		}
		&.none{
			display: none;
		}
		&.show{
			background: rgba(0,0,0,.4);
			
			.mask-content{
				transform: translateY(0);
			}
		}
	}

	/* 优惠券列表 */
	.coupon-item{
		display: flex;
		flex-direction: column;
		margin: 20upx 24upx;
		background: #fff;
		.con{
			display: flex;
			align-items: center;
			position: relative;
			height: 120upx;
			padding: 0 30upx;
			&:after{
				position: absolute;
				left: 0;
				bottom: 0;
				content: '';
				width: 100%;
				height: 0;
				border-bottom: 1px dashed #f3f3f3;
				transform: scaleY(50%);
			}
		}
		.left{
			display: flex;
			flex-direction: column;
			justify-content: center;
			flex: 1;
			overflow: hidden;
			height: 100upx;
		}
		.title{
			font-size: 32upx;
			color: $font-color-dark;
			margin-bottom: 10upx;
		}
		.time{
			font-size: 24upx;
			color: $font-color-light;
		}
		.right{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 26upx;
			color: $font-color-base;
			height: 100upx;
		}
		.price{
			font-size: 44upx;
			color: $base-color;
			&:before{
				content: '￥';
				font-size: 34upx;
			}
		}
		.tips{
			font-size: 24upx;
			color: $font-color-light;
			line-height: 60upx;
			padding-left: 30upx;
		}
		.circle{
			position: absolute;
			left: -6upx;
			bottom: -10upx;
			z-index: 10;
			width: 20upx;
			height: 20upx;
			background: #f3f3f3;
			border-radius: 100px;
			&.r{
				left: auto;
				right: -6upx;
			}
		}
	}

.pay-type-list {
		margin-top: 20upx;
		background-color: #fff;
		padding-left: 60upx;
		
		.type-item{
			height: 120upx;
			padding: 20upx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-right: 60upx;
			font-size: 30upx;
			position:relative;
		}
		
		.icon{
			width: 100upx;
			font-size: 52upx;
		}
		.icon-erjiye-yucunkuan {
			color: #fe8e2e;
		}
		.icon-weixinzhifu {
			color: #36cb59;
		}
		.icon-alipay {
			color: #01aaef;
		}
		.tit{
			font-size: $font-lg;
			color: $font-color-dark;
			margin-bottom: 4upx;
		}
		.con{
			flex: 1;
			display: flex;
			flex-direction: column;
			font-size: $font-sm;
			color: $font-color-light;
		}
	}

</style>
